<script lang="ts" setup>
import type { AiLlmBrandApi } from '#/api/ai/llm/brand';

import { computed, onMounted, ref } from 'vue';

import { Search } from '@vben/icons';
import { usePreferences } from '@vben/preferences';

import { Input, List } from 'ant-design-vue';

import { getBrandList } from '#/api/ai/llm/brand';
import { Image } from '#/components/image';

const emit = defineEmits(['select']);
const { isDark } = usePreferences();

const brandList = ref<AiLlmBrandApi.Brand[]>([]); // 所有角色数据

const searchValue = ref(''); // 搜索输入值

const loading = ref(false);

const selectedKey = ref<null | string>(null); // 当前选中的品牌

/** 根据搜索关键词实时过滤角色列表 */
const filteredList = computed(() => {
  const value = searchValue.value.trim().toLowerCase();
  return value
    ? brandList.value.filter((item) => item.title.toLowerCase().includes(value))
    : brandList.value;
});

/** 搜索框触发变化 */
function handleSearch(e: any) {
  searchValue.value = e.target.value;
}

/** 选中某个角色后更新状态并通知父组件 */
const handleSelect = (brand: AiLlmBrandApi.Brand) => {
  selectedKey.value = brand.key;
  emit('select', brand);
};

/** 加载品牌列表并默认选中第一个品牌 */
const loadBrandList = async () => {
  try {
    loading.value = true;
    const data = await getBrandList();
    brandList.value = data;
  } catch (error) {
    console.error('获取品牌数据失败', error);
  } finally {
    loading.value = false;
  }
};

/** 页面挂载完成后加载角色列表 */
onMounted(() => {
  loadBrandList();
});
</script>
<template>
  <div>
    <!-- 顶部操作区域：搜索 + 新增按钮 -->
    <div class="mb-3 flex items-center justify-between gap-2">
      <!-- 搜索框 -->
      <Input
        placeholder="搜索角色"
        allow-clear
        v-model:value="searchValue"
        @change="handleSearch"
        class="w-64"
      >
        <template #prefix>
          <Search class="size-4" />
        </template>
      </Input>
    </div>

    <!-- 角色列表 -->

    <List :data-source="filteredList" :loading="loading" :split="false">
      <template #renderItem="{ item }">
        <List.Item
          class="cursor-pointer px-1"
          :class="{
            'bg-blue-50': selectedKey === item.key && !isDark,
            'bg-gray-800': selectedKey === item.key && isDark,
            'hover:bg-gray-50': !isDark,
            'hover:bg-gray-800': isDark,
          }"
          @click="handleSelect(item)"
        >
          <!-- 每项的布局：名称 + 操作菜单 -->
          <div class="flex w-full items-center justify-start">
            <!-- 品牌图标 html svg加载-->
            <div
              v-if="item.icon && item.icon.startsWith('<svg') > 0"
              v-html="item.icon || ''"
              :style="{
                padding: '3px',
                display: 'inline-block',
                verticalAlign: 'middle',
              }"
            ></div>
            <Image v-else :src="item.icon" alt="品牌图标" />

            <!-- 品牌名 -->
            <span style="padding-left: 8px">{{ item.title }}</span>
          </div>
        </List.Item>
      </template>
    </List>
  </div>
  <!-- 空数据提示 -->
  <div
    v-if="!loading && filteredList.length === 0"
    class="py-4 text-center text-gray-500"
  >
    暂无数据
  </div>
</template>
